<!--  -->
<template>
  <div class="search clear">
    <div class="box fl">
      <div class="line-input clear">
        <span class="label fl">
          {{ ["股东查询", "机构查询"][holderType] }}
        </span>
        <input
          v-model.trim="params.content"
          ref="searchInput"
          type="text"
          class="fl"
          @keyup="search"
          @focus="page = 1"
          @blur="searchShow = false"
          :placeholder="['请输入股东名称', '请输入机构名称'][holderType]"
        />
      </div>
      <div class="holderList" v-show="searchShow" @scroll="searchScroll">
        <div
          class="item flex"
          v-for="item in holderList"
          :key="item.id"
          @mousedown="selectCur($event, item)"
        >
          {{ item.holderName }}
        </div>
      </div>
    </div>
    <div class="btn fl" @mousedown="toDetail">搜索</div>
  </div>
</template>

<script>
import { getSearchList } from "../api/index";
import debounce from "lodash/debounce";
export default {
  props: ["holderType"],
  data() {
    return {
      holderList: [],
      searchShow: false,
      total: 0,
      page: 1,
      pageSize: 14,
      holderInfo: {
        holderName: "",
        orgCode: "",
      },
      params: {
        content: "",
        holderType: this.holderType, //0-牛散,1-机构,非必传默认0
        limit: "14",
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    search: debounce(async function () {
      if (!this.params.content) return;
      this.$refs.searchInput.focus();
      const size = this.pageSize * this.page;
      this.params.limit = size > 200 ? 200 : size;
      await getSearchList(this.params).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          let count = back.data.count;
          this.holderList = list;
          this.total = count;
          this.searchShow = true;
        }
      });
    }, 300),

    selectCur(e, row) {
      e.preventDefault();
      this.params.content = row.holderName;
      this.holderInfo.holderName = row.holderName;
      this.holderInfo.orgCode = row.orgCode;
      this.$refs.searchInput.blur();
    },
    toDetail() {
      if (!this.holderInfo.holderName) return;
      this.$store.commit("set", {
        key: "holder",
        value: this.holderInfo,
      });
      this.$router.push({ name: ["nszc", "jgzc"][this.holderType] });
    },
    //搜索列表滚动节流查询
    searchScroll: debounce(function (e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - scrollTop == clientHeight) {
        this.page++;
        if (this.params.limit < this.total && this.params.limit != 200) {
          this.search();
        }
      }
    }, 300),
  },
};
</script>
<style lang="scss" scoped>
.search {
  padding: 10px 0;
  .box {
    position: relative;
    .line-input {
      border: 1px solid #2b2e3e;
      background: #102237;
      .label {
        height: 44px;
        line-height: 44px;
        width: 100px;
        text-align: center;
        font-size: 16px;
        color: #fff;
      }
      input {
        background: #090910;
        border: 1px solid #2b2e3e;
        height: 44px;
        box-sizing: border-box;
        color: #bcbfc4;
        font-size: 16px;
        padding-left: 20px;
        width: 198px;
        line-height: 44px;
        &:focus {
          border: 1px solid #364a7c;
        }
      }
    }
    .holderList {
      position: absolute;
      top: 44px;
      z-index: 3;
      left: 0;
      max-height: 403px;
      overflow-y: auto;
      width: 298px;
      background: #1c1e22;
      .item {
        min-height: 30px;
        line-height: 19px;
        font-size: 15px;
        color: #bcbfc4;
        cursor: pointer;
        padding: 5px 20px;
        align-items: center;
        word-break: break-all;
        border-bottom: 1px solid #28282e;
        &:last-child {
          border: none;
        }
        &:hover {
          background: #28282e;
          color: #fff;
          border-bottom: 1px solid transparent;
        }
      }
    }
  }
  .btn {
    margin-left: 58px;
    margin-top: 104px;
    width: 196px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    background: linear-gradient(0deg, #343845, #4e596d);
    border: 1px solid #3d3d4b;
    border-radius: 2px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    &:hover {
      background: linear-gradient(180deg, #b93636, #6a0101);
      border: 1px solid #b83636;
    }
  }
}
</style>
